<?php
    session_start();
    if(!isset($_SESSION['usuario'])){
            header('location:../html/login.html');
         }
         
         echo '
                <center>
                    <title>Consolidado Deteccion de Necesidades</title>
                    <table>
                        <tr>
                            <td>';
                         include_once 'menu.php';
                        echo"</td>
                        </tr>
                    </table>";
?>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="jquery-1.9.1.min.js"></script>
        <!-- LIBRERIAS JQUERY Y CSS PARA LA CREACION DE LAS ALERTAS -->
        <script type="text/javascript" src="../../Ginecobstetricia/vista/js/alertify.js"></script>
	<link rel="stylesheet" href="../../Ginecobstetricia/vista/css/alertify.core.css" />
	<link rel="stylesheet" href="../../Ginecobstetricia/vista/css/alertify.default.css" />
        
        
        <!-- Librerias jquery y hojas de estilo para creacion  del calendario -->
        <script src="../reportes/js/jquery-1.5.2.js" type="text/javascript"></script>
        <link rel="stylesheet" href="../reportes/css/impresion.css" type="text/css" media="print">
        <link rel="stylesheet" href="../reportes/css/jquery.ui.all.css" type="text/css">
        <script type="text/javascript" src="../reportes/js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="../reportes/js/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="../reportes/js/jquery.ui.datepicker.js"></script>
        <link rel="stylesheet" href="../reportes/css/pestana.css" />
        <script src="../reportes/js/jquery-ui.js"></script>
        
        <style>
            
            label,input,button,select,textarea{font-size:14px;font-weight:normal;line-height:20px}input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}label{display:block;margin-bottom:5px}select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:28px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555;vertical-align:middle;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}input,textarea,.uneditable-input{width:170px}textarea{height:auto}textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#fff;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border linear .2s,box-shadow linear .2s;-moz-transition:border linear .2s,box-shadow linear .2s;-o-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s}textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:rgba(82,168,236,0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6)}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;*margin-top:0;line-height:normal}input[type="file"],input[type="image"],input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto}select,input[type="file"]{height:30px;*margin-top:4px;line-height:30px}select{width:170px;background-color:#fff;border:1px solid #ccc}select[multiple],select[size]{height:auto}select:focus,input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.uneditable-input,.uneditable-textarea{color:#999;cursor:not-allowed;background-color:#fcfcfc;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);box-shadow:inset 0 1px 2px rgba(0,0,0,0.025)}.uneditable-input{overflow:hidden;white-space:nowrap}.uneditable-textarea{width:auto;height:auto}input:-moz-placeholder,textarea:-moz-placeholder{color:#999}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#999}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999}.radio,.checkbox{min-height:20px;padding-left:20px}.radio input[type="radio"],.checkbox input[type="checkbox"]{float:left;margin-left:-20px}.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:5px}.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle}.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px}.input-mini{width:60px}.input-small{width:90px}.input-medium{width:150px}.input-large{width:210px}.input-xlarge{width:270px}.input-xxlarge{width:530px}input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"],.row-fluid input[class*="span"],.row-fluid select[class*="span"],.row-fluid textarea[class*="span"],.row-fluid .uneditable-input[class*="span"]{float:none;margin-left:0}.input-append input[class*="span"],.input-append .uneditable-input[class*="span"],.input-prepend input[class*="span"],.input-prepend .uneditable-input[class*="span"],.row-fluid input[class*="span"],.row-fluid select[class*="span"],.row-fluid textarea[class*="span"],.row-fluid .uneditable-input[class*="span"],.row-fluid .input-prepend [class*="span"],.row-fluid .input-append [class*="span"]{display:inline-block}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:926px}input.span11,textarea.span11,.uneditable-input.span11{width:846px}input.span10,textarea.span10,.uneditable-input.span10{width:766px}input.span9,textarea.span9,.uneditable-input.span9{width:686px}input.span8,textarea.span8,.uneditable-input.span8{width:606px}input.span7,textarea.span7,.uneditable-input.span7{width:526px}input.span6,textarea.span6,.uneditable-input.span6{width:446px}input.span5,textarea.span5,.uneditable-input.span5{width:366px}input.span4,textarea.span4,.uneditable-input.span4{width:286px}input.span3,textarea.span3,.uneditable-input.span3{width:206px}input.span2,textarea.span2,.uneditable-input.span2{width:126px}input.span1,textarea.span1,.uneditable-input.span1{width:46px}.controls-row{*zoom:1}.controls-row:before,.controls-row:after{display:table;line-height:0;content:""}.controls-row:after{clear:both}.controls-row [class*="span"],.row-fluid .controls-row [class*="span"]{float:left}.controls-row .checkbox[class*="span"],.controls-row .radio[class*="span"]{padding-top:5px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background-color:#eee}input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"][readonly],input[type="checkbox"][readonly]{background-color:transparent}.control-group.warning .control-label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853}.control-group.warning .checkbox,.control-group.warning .radio,.control-group.warning input,.control-group.warning select,.control-group.warning textarea{color:#c09853}.control-group.warning input,.control-group.warning select,.control-group.warning textarea{border-color:#c09853;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.warning input:focus,.control-group.warning select:focus,.control-group.warning textarea:focus{border-color:#a47e3c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e}.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853}
            
            .white{
                border-radius: 5px;
                color: #606060;
                border: solid 1px #b7b7b7;
                background: #fff;
                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
                background: -moz-linear-gradient(top,  #fff,  #ededed);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
                padding: 2px 2px 2px;
                font-size: 100%;
            }

                .white:hover {
                    background: #ededed;
                    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
                    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
                    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
            }
                .white:active {
                    color: #999;
                    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
                    background: -moz-linear-gradient(top,  #ededed,  #fff);
                    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
            }
            
            /*estilos para la creacion de la tabla de pop-up*/
            .white_content {
                display: none;
                position: absolute;
                top:1%;
                left: 4%;
                width: 90%;
                height: 85%;
                padding: 1%;
                z-index:1002;
                overflow: auto;
                background-color: white;
                border-radius: 10px;
                margin-top: 30px;

            }
            
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            
            #barras{
                
                width: 90%;
                height: 25px;
                border-radius: 10px 10px 0 0;
                
                
                /**/
                background:linear-gradient(#B5B5B5, #e8eaeb);
                font-weight: bold;
                position: relative;
                border-radius: 5px 5px 0px 0px;
                
            }
            
            #barras2{
                
                width: 90%;
                height: 25px;
                border-radius: 0 0 10px 10px;
                
                /**/
                background:linear-gradient(#e8eaeb, #B5B5B5);
                font-weight: bold;
                position: relative;
            }
            
        </style>
        
        <script>
            
            function calendario() {
                /*funcion para invocar el funcionamiento de el calendario*/
                    $( "#fecha1" ).datepicker({ 
                     autoSize: true,
                     dayNames: ['Domingo', 'Lunes', 'Martes', 'Mi?rcoles', 'Jueves', 'Viernes', 'S?bado'],
                     dayNamesMin: ['Dom', 'Lu', 'Ma', 'Mi', 'Je', 'Vi', 'Sa'],
                     firstDay: 1,
                     monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
                     monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
                     dateFormat: 'dd-mm-yy',
                     changeMonth: true,
                     changeYear: true,
                     yearRange: "-90:+0"

                    });
            }
            
            function calendario2() {
                /*funcion para invocar el funcionamiento de el calendario*/
                    $( "#fecha2" ).datepicker({ 
                     autoSize: true,
                     dayNames: ['Domingo', 'Lunes', 'Martes', 'Mi?rcoles', 'Jueves', 'Viernes', 'S?bado'],
                     dayNamesMin: ['Dom', 'Lu', 'Ma', 'Mi', 'Je', 'Vi', 'Sa'],
                     firstDay: 1,
                     monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
                     monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
                     dateFormat: 'dd-mm-yy',
                     changeMonth: true,
                     changeYear: true,
                     yearRange: "-90:+0"

                    });
            }
            
            function cargarAreas(){
                $.ajax({
                            type: "POST",
                            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                            url: "../../DeteccionN/controlador/sql/datosnecesidad.php",
                            success: mostrarAreas,
                            timeout: 4000
                        });
            }
            
            function mostrarAreas(datos){
                rptn = $.parseJSON(datos);
                
                datos = $("#areas");
                for(datn in rptn ){
                    datos.append("<option value='"+ rptn[datn].tipoid +"'>"+ rptn[datn].tipnombre +"</option>");
                }
            }
            
            function cargarTabla(){
                
                var tc = 1;
                
                var area = $("#areas").val();
                var estado = $("#estado").val();
                var fecha1 = $("#fecha1").val();
                var fecha2 = $("#fecha2").val();
                
                $.ajax ({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url: "../../DeteccionN/controlador/sql/consolidado.php",
                    data: {tc:tc,area:area,estado:estado,fecha1:fecha1,fecha2:fecha2},
                    success: mostrarTabla,
                    timeout: 4000 
                });
                
            }
            
            function mostrarTabla(datos){
                
                $("#contenedor").text("");
                
                rpt = $.parseJSON(datos);
                datos = $("#contenedor");
                
                var resp = "";
                var con = 1;
                resp += '<table style="width:100%;font-size:80%">';
                resp += '<tr>\
                <td align="center" style="background-color: #E6E6E6;width:39px">\
                    \
                </td>\
                <td align="center" style="background-color: #E6E6E6;width:315px">\
                    <strong>SOLICITADO POR</strong>\
                </td>\
                <td align="center" style="background-color: #E6E6E6;width:355px">\
                    <strong>SERVICIO</strong>\
                </td>\
                <td align="center" style="background-color: #E6E6E6;">\
                   <strong>DETECCION</strong>\
                </td>\
                <td align="center" style="background-color: #E6E6E6;">\
                    <strong>ESTADO</strong>\
                </td>\
                <td align="center" style="background-color: #E6E6E6;">\
                    <strong>FECHA SOLICITUD</strong>\
                </td>\
                <td align="center" style="background-color: #E6E6E6;">\
                    <strong>HISTORIAL</strong>\
                </td>\
            </tr>';
                for(r in rpt){
                   
                   var estad = rpt[r].dnsestado;
                   if(estad == "1"){
                       var estado = "Registrado";
                   }else if(estad == "2"){
                       estado = "Asignado";
                   }else if(estad == "3"){
                       estado = "En Tramite";
                   }else if(estad == "4"){
                       estado = "Con Respuesta";
                   }else if(estad == "5"){
                       estado = "Verificado";
                   }else if(estad == "6"){
                       estado = "Aceptado";
                   }else if(estad == "7"){
                       estado = "Derrogado";
                   }
                   
                   
                    resp += '<tr>\
                                <td style="padding:5px 5px 5px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));">\
                                    '+ con +'\
                                </td>\
                                <td style="padding:5px 5px 5px; text-align:left;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));">\
                                    '+ rpt[r].nombres +'\
                                    <input type="hidden" name="" id="solicitante'+ r +'" value="'+ rpt[r].nombres +'" />\
                                    <input type="hidden" name="" id="descri'+ r +'" value="'+ rpt[r].dnsdescri +'" />\
                                    <input type="hidden" name="" id="justi'+ r +'" value="'+ rpt[r].dnsjustifi +'" />\
                                    <input type="hidden" name="" id="pertinencia'+ r +'" value="'+ rpt[r].conpertinen +'" />\
                                    <input type="hidden" name="" id="prioridad'+ r +'" value="'+ rpt[r].conpriorid +'" />\
                                    <input type="hidden" name="" id="fechac'+ r +'" value="'+ rpt[r].confecump +'" />\
                                    <input type="hidden" name="" id="oportunidad'+ r +'" value="'+ rpt[r].condias +'" />\
                                </td>\
                                <td style="padding:5px 5px 5px; text-align:left;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));">\
                                    '+ rpt[r].GDPNOMBRE +'\
                                </td>\
                                <td style="padding:5px 5px 5px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));">\
                                    '+ rpt[r].mecnombre +'\
                                </td>\
                                <td style="padding:5px 5px 5px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));">\
                                    '+ estado +'\
                                </td>\
                                <td style="padding:5px 5px 5px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));">\
                                    '+ rpt[r].dnfecha +'\
                                </td>\
                                <td style="padding:5px 5px 5px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));">\
                                    <img onclick="cargarSol('+ r +','+ rpt[r].dnsoid +');" style="cursor:pointer" src="../imagen/vers.png" width="25" height="25" alt="vers"/>\
                                </td>\
                             </tr>';
                    con++;
                    
                }
                resp += '</table>';
                
                datos.append(resp);
                
            }
            
            function cargarSol(posi,dnsoid){
                
                var priori = document.getElementById("prioridad"+posi).value;
                var prioridad = "";
                
                if(priori == "al "){
                    prioridad = "Alta";
                }
                else if(priori == "me "){
                    prioridad = "Media";
                }
                else if(priori == "ba "){
                    prioridad = "Baja";
                }else{
                    prioridad = "";
                }
                
                
                document.getElementById("solicitante").innerHTML = document.getElementById("solicitante"+posi).value;
                document.getElementById("descri").innerHTML = document.getElementById("descri"+posi).value;
                document.getElementById("justi").innerHTML = document.getElementById("justi"+posi).value;
                document.getElementById("pertinencia").innerHTML = document.getElementById("pertinencia"+posi).value;
                document.getElementById("prioridad").innerHTML = prioridad;
                document.getElementById("fechac").innerHTML = document.getElementById("fechac"+posi).value;
                document.getElementById("oportunidad").innerHTML = document.getElementById("oportunidad"+posi).value + "Dias";
                document.getElementById("consecutivo").innerHTML = dnsoid;
                document.getElementById("conse").value = dnsoid;
                cargarHistorial(dnsoid);
                historial();
                
            }
            
            function historial(){
                
                document.getElementById('his').style.display='block';
                document.getElementById('fade').style.display='block';
                
            }
            
            function cerrar(){
                
                document.getElementById('his').style.display='none';
                document.getElementById('fade').style.display='none';
                
            }
            
            function cargarHistorial(oids){
                
                $.ajax({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url: "../../DeteccionN/controlador/sql/datosH.php",
                    data: {oids:oids},
                    success: tablah,
                    timeout: 4000
                });
                
            }
            
            function tablah(datos){
                
                /*se crea una primera klista con las fechas del historial*/
                
                rpt2 = $.parseJSON(datos);
                
                var resp2 = $("#hist");
                for(r2 in rpt2){
                    resp2.append ('<input type="hidden" id="fechis'+ r2 +'" name="" value="'+ rpt2[r2].hisfecmod +'" />');
                }
                
                /**/
                
                $("#contenidoh").text("");
                rpt = $.parseJSON(datos);
                
                datos = $("#contenidoh");
                var resp = "";
                var posi = 0;
                var obs = "";
                var obs3 = "";
                
                resp += '<table style="font-size:70%;width:100%">';
                for(res in rpt){
                   var estad = rpt[res].hisestado;
                   if(estad == "1"){
                       var estado = "Registrado";
                   }else if(estad =="2"){
                       estado = "Asignado";
                   }else if(estad == "3"){
                       estado = "En Tramite";
                   }else if(estad == "4"){
                       estado = "Con Respuesta";
                   }else if(estad == "5"){
                       estado = "Verificado";
                   }else if(estad == "6"){
                       estado = "Aceptado";
                   }else if(estad == "7"){
                       estado = "Derrogado";
                   }
                   
                   obs = rpt[res].obs;
                   obs3 = '"'+ rpt[res].obs +'"';
                   
                   if(obs != " "){
                       var obs2 = "<div onclick='cargarObs2("+ rpt[res].hisoid +","+ obs3 +")'>"+obs+"</div>";
                   }else{
                       obs2 = "<div id='obs"+ res +"'><img onclick='cargarObs("+ rpt[res].hisoid +");' title='Agregar observacion a funcionario' src='../imagen/agregr.png' width='15' height='15' alt='agregr'/></div>";
                   }
                   
                   var adjun = rpt[res].hisadjuntos;
                   if(adjun === " "){
                       var adjunto = "<label style='font-size: 100%' title='no se encuentran archivos adjuntos'>No Adjunto</label>";
                   }else{
                        adjunto = "<a style='text-decoration:none;' href='"+ adjun +"'><img title='"+ adjun +"' src='../imagen/adju.png' width='25' height='25' alt='adju'/></a>";
                   }
                   
                   resp += ("<tr>\
                                <td title='Fecha de modificacion' style='padding:1px 1px 1px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));'>\
                                    "+ rpt[res].hisfecmod +"\
                                </td>\
                                <td title='Estado de la solicitud' style='padding:1px 1px 1px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));'>\
                                    "+ estado +"\
                                </td>\
                                <td title='Registrado por' style='padding:1px 1px 1px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));'>\
                                    "+ rpt[res].nombres +"\
                                </td>\
                                <td title='Observaciones de la solicitud' style='padding:1px 1px 1px;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); width:40%'>\
                                     - "+ rpt[res].obsh +"\
                                </td>\
                                <td title='Archivos adjuntos' style='cursor:pointer;padding:1px 1px 1px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));'>\
                                    "+ adjunto +"\
                                </td>\
                                <td align='center' title='observaciones' style='cursor:pointer;padding:1px 1px 1px;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));'>\
                                    "+ obs2 +"\
                                </td>\
                             </tr>");
                                    
                             //posi = parseInt(res)+parseInt(1);
                             //alert(rpt[res].hisfecmod+"-"+document.getElementById("fechis"+posi).value);      
                             
                          /*   var f1 = rpt[res].hisfecmod;
                             var f2 = document.getElementById("fechis"+posi).value;

                             var fecha1 = new Date(f1);
                             var fecha2 = new Date(f2);
                             alert(fecha1 +"-"+ fecha2);
                             var diasDif = fecha2.getTime() - fecha1.getTime();
                             var horas = Math.round(diasDif/(60 * 60 * 1000));
                             alert("horas de diferencia: " + horas);*/
                             
                             
                }
                resp += "</table>";
                datos.text("");
                datos.append(resp);
            }
            
            function cargarObs(hisoid){
            
                alertify.prompt("Observaciones para el funcionario:</br></br>", function (e, str) {
                        // str is the input text
                        if (e) {
                            // user clicked "ok"
                            
                            /*validamos si el campo de texto esta vacio*/
                            if(str === ""){
                                alertify.alert("Por favor digite su observación", function () {
                                    cargarObs(hisoid);
                                });
                                return false;
                            }
                            
                            guardarObs(str,hisoid);
                            //document.getElementById("obs"+posi).innerHTML = str;
                            
                        } else {
                            // user clicked "cancel"
                            
                        }
                    }, "");
            
            }
            
            function cargarObs2(hisoid,obs){
                
                alertify.prompt("Aceptar para guardar los cambios...</br></br>", function (e, str){
                        // str is the input text
                        if (e) {
                            // user clicked "ok"
                            
                            /*validamos si el campo de texto esta vacio*/
                            if(str === ""){
                                alertify.alert("Por favor digite su observación", function () {
                                    cargarObs2(hisoid,obs);
                                });
                                return false;
                            }
                            
                            guardarCambios(str,hisoid);
                            
                        } else {
                            // user clicked "cancel"
                            
                        }
                    }, "");
                    document.getElementById("alertify-text").value = obs;
            }
            
            function guardarObs(obs,hisoid){
                
                var tc = 1;
                var dnsoid = document.getElementById("conse").value;
                
                $.ajax({
                    async: true,
                    type: "POST",
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url: "../../DeteccionN/controlador/crudObservacion.php",
                    data: {tc:tc,obs:obs,dnsoid:dnsoid,hisoid:hisoid},
                    success: respuestaObs,
                    timeout: 4000
                });
                
            }
            
            function respuestaObs(datos){
                
                cargarHistorial(datos.respuesta);
            }
            
            function guardarCambios(obs,hisoid){
                
                var tc = 2;
                var dnsoid = document.getElementById("conse").value;
                
                $.ajax({
                    async: true,
                    type: "POST",
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url: "../../DeteccionN/controlador/crudObservacion.php",
                    data: {tc:tc,obs:obs,dnsoid:dnsoid,hisoid:hisoid},
                    success: respuestaGObs,
                    timeout: 4000
                });
                
            }
            
            function respuestaGObs(datos){
                
                cargarHistorial(datos.respuesta);
                
            }
            
        </script>
        
    </head>
    <body onload="cargarAreas();calendario();calendario2();">
        
        <div id="barras">
            <div style="padding-top: 5px;font-size: 85%"><strong>CONSOLIDADO DETECCION DE NECESIDADES</strong></div>
        </div>
        <div id="contenedor" style="overflow-y: scroll;width: 89.7%;height: 350px;border-style: solid; border-width: 1px;border-color:#E6E6E6">
            
        </div>
        <div style="width: 90%" align="right">
            <table style="font-size: 80%">
                <tr>
                    <td>
                        <strong>Area:</strong>
                    </td>
                    <td>
                        <select name="" style="font-size: 100%;width: 100px;height: 24px;margin-bottom: 1px" id="areas">
                            <option value=''>Seleccione</option>
                        </select>
                    </td>
                    <td style="width: 10px">
                        
                    </td>
                    <td>
                        <strong>Estado:</strong>
                    </td>
                    <td>
                        <select name="" style="font-size: 100%;width: 100px;height: 24px;margin-bottom: 1px" id="estado">
                            <option value="">Seleccione</option>
                            <option value="1">Registrado</option>
                            <option value="2">Asignado</option>
                            <option value="3">En Tramite</option>
                            <option value="4">Con Respuesta</option>
                            <option value="5">Verificado</option>
                            <option value="6">Aceptado</option>
                            <option value="7">Derrogado</option>
                            <option value="8">Todos</option>
                            
                        </select>
                    </td>
                    <td style="width: 10px">
                        
                    </td>
                    <td>
                        <strong>Fecha Inicial:</strong>
                    </td>
                    <td style="width: 80px">
                        <input type="text" name="" id="fecha1" value="" style="width: 100px;height: 24px;margin-bottom: 1px"/>
                    </td>
                    <td style="width: 10px">
                        
                    </td>
                    <td>
                        <strong>Fecha Final:</strong>
                    </td>
                    <td>
                        <input type="text" name="" value="" style="width: 100px;height: 24px;margin-bottom: 1px" id="fecha2"/>
                    </td>
                    <td>
                        <input class='white' type="button" value="Buscar" onclick="cargarTabla();"/>
                    </td>
                </tr>
            </table>
        </div>
        <div id="barras2">
            
        </div>
        <div id="his" class="white_content">
            <div align="center" style="background-color:#e8eaeb;height:7%;width:100%; border-radius: 10px 10px 0 0;">
                <table style="width:100%; height:10%;font-size: 90%" >
                    <tr>
                        <td align="right" width="5%" align="center">
                            <button type="button" onclick = "cerrar();">X</button>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="conte" style="width: 100%;height: 485px;overflow-y: scroll">
                <table style="width: 100%;font-size: 90%;padding: 10px 10px 10px;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;-moz-border-radius:8px; /* FF1+ */-webkit-border-radius:8px; /* Saf3-4 */border-radius:8px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);">
                    <tr>
                        <td style="padding: 0.5%;height: 1px;width: 250px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  ">
                            SOLICITANTE:
                        </td>
                        <td style="padding:10px 10px 10px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));font-size:80%">
                            <table align="right" style="width: 100%;font-size: 100%">
                                <tr>
                                    <td>
                                        <div id="solicitante"></div>
                                    </td>
                                    <td align="right">
                                        <table style="font-size: 100%">
                                            <tr>
                                                <td>
                                                    Consecutivo:
                                                </td>
                                                <td>
                                                    <div id="consecutivo"></div>
                                                    <input type="hidden" name="" value="" id="conse"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0.5%;height: 1px;width: 250px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  " colspan='2' align="center">
                            DESCRIPCION DE LA SOLICITUD
                        </td>
                    </tr>
                    <tr>
                        <td colspan='2' style="padding:10px 10px 10px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));font-size:80%">
                            <div id='descri'>
                                
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0.5%;height: 1px;width: 250px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  " colspan='2' align="center">
                            JUSTIFICACION
                        </td>
                    </tr>
                    <tr>
                        <td colspan='2' style="padding:10px 10px 10px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));font-size:80%">
                            <div id='justi'>
                                
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0.5%;height: 1px;width: 250px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  " colspan='2' align="center">
                            CONDUCTA DE LA SOLICITUD
                        </td>
                    </tr>
                    <tr>
                        <td colspan='2'>
                            <table style="width: 100%;font-size: 100%;">
                                <tr>
                                    <td style="padding: 0.5%;height: 1px;width: 250px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  ">
                                        PERTINENCIA
                                    </td>
                                    <td style="padding:10px 10px 10px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));font-size:80%">
                                        <div id="pertinencia"></div>
                                    </td>
                                    <td style="padding: 0.5%;height: 1px;width: 250px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  ">
                                        PRIORIDAD
                                    </td>
                                    <td style="padding:10px 10px 10px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));font-size:80%">
                                        <div id="prioridad"></div>
                                    </td>
                                    <td style="padding: 0.5%;height: 1px;width: 250px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  ">
                                        FECHA CUMPLIMIENTO
                                    </td>
                                    <td style="padding:10px 10px 10px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));font-size:80%">
                                        <div id="fechac"></div>
                                    </td>
                                    <td style="padding: 0.5%;height: 1px;width: 250px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  ">
                                        OPORTUNIDAD
                                    </td>
                                    <td style="padding:10px 10px 10px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));font-size:80%">
                                        <div id="oportunidad"></div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <div style="text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; font-size:90%;  ">
                    <label style="font-size: 90%;">HISTORIAL DE LA SOLICITUD</label>
                </div>
                <div style="overflow-y:scroll;height: 185px" id="contenidoh">
                    
                </div>
            </div>
            <div align="center" style="background-color:#e8eaeb;height:7%;width:100%; border-radius:  0 0 10px 10px;">
                
            </div>
        </div>
        <div id="fade" class="black_overlay"></div>
    </body>
    <div id="hist"></div>
</html>
<!--<input type="button" value="0000" onclick="pruebt();"/>-->
